<script setup lang="ts" name="StoreForm">
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { getStoreAllApi, updateUserApi, addUserApi } from '@/addon/htscrm/api'
import { cloneDeep } from 'lodash-es'
import { t } from '@/lang'

const defaultFormData: IUserItem = {
    nickname: '',
    mobile: '',
    avatar: '',
    sex: 0,
    money: '',
    tid: null,
    level: null,
    reg_time: null,
    status: 1,
    store_id: null,
    age: null,
    jifen: '',
    last_join_time: null
}

/** 表单实例 */
const formRef = ref<FormInstance>()
/** 表单数据 */
const formData = ref<IUserItem>({ ...defaultFormData })

// 表单规则
const formRules = reactive<FormRules>({})

const storeList = ref<IStoreItem[]>([])

/**
 * @description 初始化
 */
function init (row?: IUserItem) {
    formRef.value?.resetFields()
    formData.value = { ...defaultFormData, ...row }
    getStoreList()
}

/**
 * @description 提交保存
 */
function submit () {
    return new Promise((resolve, reject) => {
        formRef.value?.validate(async (valid) => {
            if (valid) {
                const params = cloneDeep(formData.value) as any

                // 表单校验
                params.id
                    ? await updateUserApi(params)
                    : await addUserApi(params)
                ElMessage.success(t('save.success'))
                resolve(true)
            } else {
                reject(new Error(t('form.validateError')))
            }
        })
    })
}

async function getStoreList () {
    const res = await getStoreAllApi()
    storeList.value = res.data
}

defineExpose({
    init,
    submit
})
</script>

<template>
  <el-form class="f-form" ref="formRef" label-width="120px" :model="formData" :rules="formRules">
    <el-form-item label="昵称">
      <el-input v-model="formData.nickname" placeholder="请输入昵称" />
    </el-form-item>
    <el-form-item label="手机">
      <el-input v-model="formData.mobile" placeholder="请输入手机" />
    </el-form-item>
    <el-form-item label="头像">
      <upload-image v-model="formData.avatar" :limit="1" />
    </el-form-item>
    <el-form-item label="所属门店">
      <el-select v-model="formData.store_id" filterable class="min-w-[400px]">
        <el-option v-for="item in storeList" :key="item.id" :label="item.title" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="审核状态">
      <el-radio-group v-model="formData.status">
        <el-radio label="已通过" :value="1"></el-radio>
        <el-radio label="审核中" :value="2"></el-radio>
        <el-radio label="已拒绝" :value="3"></el-radio>
        <el-radio label="黑名单" :value="-1"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="聊天状态">
      <el-radio-group v-model="formData.status">
        <el-radio label="已禁言" :value="1"></el-radio>
        <el-radio label="可聊天" :value="2"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="区域限制">
      <el-radio-group v-model="formData.status">
        <el-radio label="已限制" :value="0"></el-radio>
        <el-radio label="无限制" :value="1"></el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
</template>
